import { FC } from "react";
import styles from "./index.module.scss";
import { SongSheetFace } from "@/api/search/index";
interface IProps {
  list: SongSheetFace[];
}
const SongSheet: FC<IProps> = ({ list }) => {
  return (
    <div className={styles.SongSheet}>
      <div className={styles.list_wrap}>
        {list.map((it, index) => {
          return (
            <div className={styles.listItem} key={index}>
              <div className={styles.left}>
                <img src={it.coverImgUrl} alt="" />
              </div>
              <div className={styles.content}>
                <div>
                  <span className={styles.name}>{it.name}</span>
                </div>
                <div>
                  <span className={styles.trackCount}>{it.trackCount}首</span>
                  <span> , </span>
                  <span>by</span>
                  <span>{it.nickname}</span>
                  <span> , </span>
                  <span>播放{it.playCount}次</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default SongSheet;
